<script lang="ts">
	import RollNumber from './RollNumber.svelte';

	export let offsetTime = 12000000;
	export let color = '#d2d4d6';
	export let info = '';

	$: DD = Math.floor(offsetTime / 86400000);
	$: hh = Math.floor((offsetTime / 3600000) % 24);
	$: mm = Math.floor((offsetTime % 3600000) / 60000);
	$: ss = Math.floor(((offsetTime % 3600000) % 60000) / 1000);

	$: contentStyle = [`background-color: ${color}`];
	$: timeColor = `--mdc-theme-primary: ${color}`;
</script>

<div class="w-full min-h-100px flex-cc rounded-sm" style={contentStyle.join(';')}>
	<!-- <RollNumber num={String(ss)} range={60} /> -->
	<div class="pl-20px flex-cc gap-0.5em">
		<span class="material-symbols-outlined text-white"> timer </span>
		<span class="text-white font-size-36px">Timing</span>
	</div>
	<div class="flex-1 text-right pr-20px cutdown font-size-16px" style={timeColor}>
		{#if info}
			{info}
		{:else}
			{'Distance to End'}
			<span class="line-height-40px font-size-20px">
				{DD}
			</span>
			Day
			<span class="line-height-40px font-size-20px">
				{hh}
			</span>:
			<span class="line-height-40px font-size-20px">
				{mm}
			</span>:
			<span class="line-height-40px font-size-20px">
				{ss}
			</span>
		{/if}

		<!-- <span class="text-white"> {discount} </span> -->
	</div>
</div>

<style lang="scss">
	.cutdown {
		color: #fff;
		span {
			display: inline-block;
			width: 30px;
			text-align: center;
			color: var(--mdc-theme-primary);
			background-color: #fff;
		}
	}
</style>
